.border {
  outline: 1px solid #ccc;

  table {
    th,
    td {
      border-bottom: 0;
      border-right: 1px solid #ccc;
    }

    tbody {
      tr {
        &:last-child {
          td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

.stripe {
  table {
    tbody {
      tr {
        &:nth-child(even) {
          td {
            background-color: #f9f9f9;
          }
        }
      }
    }
  }
}

.fix-header {
  table {
    thead {
      position: sticky;
      top: 0;
      z-index: 2;
      box-shadow: 0 1px 1px #ddd;
    }
  }
}

.burger-table {
  overflow: auto;
  box-sizing: border-box;

  table {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
    color: #303133;
    font-size: 14px;

    thead {
      background-color: #eee;
    }

    th,
    td {
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      text-align: center;
      background-color: #fff;

      .text {
        padding: 8px 12px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 20px;
      }

      &.fixed {
        position: sticky;
        z-index: 1;
      }
    }

    th {
      background-color: #f0f0f0;
    }

    th.left {
      left: 0;
      box-shadow: 2px 0 1px #ddd;
    }

    th.right {
      right: 0;
      box-shadow: -2px 0 1px #ddd;
    }

    td.left {
      left: 0;
      box-shadow: 1px 0 1px 1px #ddd;
    }

    td.right {
      right: 0;
      box-shadow: -1px 0 1px 1px #ddd;
    }

    tbody {
      tr {
        &:hover {
          td {
            transition: background-color 0.2s;
            background-color: #f9f9f9;
          }
        }
      }
    }
  }

  .no-data {
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 32px;
    background-color: #f9f9f9;
  }
}

:deep(.burger-checkbox-text) {
  padding: 0;
}
